import React, { Component } from 'react'
import { connect } from 'dva';

import moment from 'moment';
import { Form, DatePicker, Icon } from 'antd';
import { SearchRow, SearchCol, SearchButton } from '@/styled/form';
import { DICT } from '../enum';
import { DropDownSelectObj } from '@/components/DropDownSelect/index';

const { RangePicker } = DatePicker;

interface Props {
  current: number,
  form: any,
  dispatch?: Function,
  initCurrent: Function,
  dict?: Object,
  dictList?: Object,
  new: boolean,
  cond?: any
}

const FormItem = Form.Item;


@connect(({ device_alarm }) => ({
  dict: device_alarm.dict,
  cond: device_alarm.historyCond,
  dictList: device_alarm.dictList
}))
class Search extends Component<Props, any> {

  componentDidMount() {
    const { dispatch } = this.props;

    dispatch({
      type: 'device_alarm/queryDict',
      payload: {
        keyList: DICT
      }
    }).then(() => {
      const { cond, form } = this.props;
      const { pageNum, pageSize, ...searchParams } = cond;
      form.setFieldsValue(searchParams);
    });
  }

  search = e => {
    e.preventDefault();

    const { form } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        const { dispatch } = this.props;
        dispatch({
          type: 'device_alarm/updateHistoryCond',
          payload: values
        }).then(() => {
          this.props.initCurrent()
        })
      }
    });
  };

  handleChange = (type, value) => {
    const { cond = {}, dispatch } = this.props;
    cond[type] = value;

    dispatch({
      type: 'device_alarm/updateHistoryCond',
      payload: cond
    }).then(() => {
      this.props.initCurrent()
    })
  }

  handleChangeTime = (value) => {
    const { cond = {}, dispatch } = this.props;
    cond['beginTime'] = Array.isArray(value) && value[0] 
      ? moment(value[0]).format("YYYY-MM-DD") 
      : null;
    cond['endTime'] = Array.isArray(value) && value[1] 
      ? moment(value[1]).format("YYYY-MM-DD") 
      : null;

    dispatch({
      type: 'device_alarm/updateHistoryCond',
      payload: cond
    }).then(() => {
      this.props.initCurrent()
    })
  }

  render() {
    const { form, dict = {} } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    return (
      <Form onSubmit={this.search}>
        <SearchRow>
          
          <SearchCol key={1} span={5}>
            <FormItem
              label="报警类型"
              {...formItemLayout}
            >
              {getFieldDecorator('disPoseStatus')(
                DropDownSelectObj({ dict, type: 'device.dispose.status', 
                  onChange: (v) => this.handleChange('disPoseStatus', +v) }
                )
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={2} span={6}>
            <FormItem
              label="处理结果"
              {...formItemLayout}
            >
              {getFieldDecorator('resource')(
                DropDownSelectObj({ dict, type: 'device.dispose.resource', 
                  onChange: (v) => this.handleChange('resource', +v) }
                )
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={0} span={7}>
            <FormItem
              label="报警时间"
              {...formItemLayout}
            >
              {getFieldDecorator('pushTime')(
                <RangePicker
                  style={{ width: '100%' }}
                  showTime={false}
                  format="YYYY-MM-DD HH:mm:ss"
                  placeholder={['开始时间', '结束时间']}
                  onChange={(v) => this.handleChangeTime(v)}
                />
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={3} span={6}>
            <SearchRow type="flex" justify="end">
              <SearchButton style={{ minWidth: '40px' }} onClick={() => {
                this.props.form.resetFields();
              }} ><Icon type="redo" /> 重置</SearchButton>
              <SearchButton style={{ minWidth: '40px' }} htmlType="submit" type="primary">
                <Icon type="search" />搜索</SearchButton>
            </SearchRow>
          </SearchCol>
        </SearchRow>
      </Form>
    );
  }
}

const SearchS = Form.create<Props>()(Search);
export default SearchS;
